<template>
	<view class="page_body">
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl"
			:style="{'height':statusBarHeight}"></view>
		<!-- 占位盒子 -->
		<view class=""
			:style="{'height': height}"></view>
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'"
			@click="navToBack"
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">退货原因</text>
		</navBar>
		
		<scroll-view 
		scroll-y
		:style="{'height': 'calc(100vh - ' + demoTopHieght +')'}"
		class="mian_returnCause"
		>
			
			<template v-if="causeType == 1">
				<view class="mian_returnCause_money pd_lr10">
					<view class="mian_returnCause_money_l">
						退款金额
					</view>
					<view class="mian_returnCause_money_r">
						￥{{Utils.formatToFixed(money,'money')}}
					</view>
				</view>
				<view class="mian_returnCause_cause pd_lr10">
					<view class="mian_returnCause_cause_l">
						退款原因
					</view>
					<view class="mian_returnCause_money_r">
						<u--textarea
						confirmType="done"
						height='200'
						border='none'
						v-model="summary"
						placeholder="请说明原因" >
						</u--textarea>
					</view>
				</view>
				<view class="mian_returnCause_upload pd10">
					<view class="mian_returnCause_upload_l">
						上传凭证(最多三张)
					</view>
					<view class="mian_returnCause_money_r">
						<image v-for="(item,index) in imgList" :key="index" :src="item.url ? uploadImgUrl + item.url : ''"></image>
						<image v-if="imgList.length < 3" @click="uploadImg" :src="xcxImgUrl && xcxImgUrl+'page_public/static/shangchuan.svg'"></image>
						
					</view>
				</view>
				<view @click="submit" class="">
					<newBtn color='#FFFF' bgColor="#ec4141" name="提交"></newBtn>
				</view>
			</template>
			<template v-if="causeType == 2">
				<view class="mian_chenggong pd10">
					<image :src="xcxImgUrl && xcxImgUrl+'page_public/static/chengong.png'"></image>
					<view class="mtb10 title">申请成功</view>
					<view class="text">
						已经收到您的退款申请，我们将第一时间处理，请您耐心等待。为您带来的不便我们深表抱歉！
					</view>
				</view>
				<view @click="sure" class="">
					<newBtn color='#FFFF' bgColor="#ec4141" name="确认"></newBtn>
				</view>
			</template>
		</scroll-view>
		
		<!-- 模态框确认 -->
		<u-modal 
		:show="modalShow" 
		:title="modalInfo.title" 
		showConfirmButton
		showCancelButton
		@confirm='modalConfirm'
		@cancel='modalShow = false'
		:content='modalInfo.content'>
		
		</u-modal>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import newBtn from '@/components/newBtn/newBtn.vue'
	import { uploadImgUrl } from '@/utils/request.js'
	import {addMallOrderReturn} from '@/api/global.js'
	export default {
		computed:{
			...mapGetters(['demoTopHieght']),
		},
		components:{
			newBtn
		},
		data() {
			return {
				uploadImgUrl,
				statusBarHeight:'',
				height:'',
				causeType:1,//1.展示所有的填写项 2.完成展示 
				summary:'',//退款原因
				money:0,//退款金额
				imgList:[],//图片数组
				preferential:0,//优惠金额
				styleQty:0,//商品种类数量
				qty:0,//商品总件数
				modalShow:false,//模态框
				modalInfo:{ //模态框提示对象内容
					title:'温馨提示',
					content:''
				},
			};
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.height = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度
				this.Utils.getDemoTopHeight('mian_returnCause')
			})
			this.getList()
		},
		methods:{
			//确认
			sure(){
				uni.navigateTo({
					url:'/page_public/refundOrder'
				})
			},
			//模态框确认
			async modalConfirm(){
			
				//获取sku信息json
				let json = []
				if(this.commonityItem.type == 1){ //普通商品
					this.commonityItem.commodityInfo.forEach(item=>{
						//先筛选所有skuInfo对象
						item.children.filter(it=>it.skuChecked).forEach(it=>{
							json.push(
								{
								commodityId: it?.commodityId || 0,
								commodityDetailId: it?.commodityDetailId || 0,
								qty: it?.qty || 0,
								price: it?.price || 0,
								money: it?.money || 0,
								// preferential: '', // 活动
								summary: it?.summary || '',
								branchId: it?.branchId || 0,
								accountId:it?.accountId || 0,
								bussinessId: it?.bussinessId || 0,
								orderDetailId:it?.detailId || 0
								}
							)
						})
					})
					
				}
				
				if(this.commonityItem.type == 2){ //活动商品
				    const arr = this.commonityItem.commodityInfo.filter(item => item.checked)
					arr.forEach(item=>{
						json.push(
							{
							commodityId: item?.commodityId || 0,
							commodityDetailId: item?.commodityDetailId || 0,
							qty: item?.qty || 0,
							price: item?.price || 0,
							money: item?.money || 0,
							preferential: item?.preferential || 0, // 活动优惠金额
							summary: item?.summary || '',
							branchId: item?.branchId || 0,
							accountId:item?.accountId || 0,
							bussinessId: item?.bussinessId || 0,
							orderDetailId:item?.detailId || 0
							// activityDetailId:item?.activityDetailId || 0,
							// parentid:item?.children?.[0]?.parentId || 0
							}
						)
						if(this.commonityItem.activityType == 1){ //满赠 有赠品
							// 循环children
							item.children && item.children.length && item.children.forEach(it=>{
								json.push(
									{
									commodityId: it?.commodityId || 0,
									commodityDetailId: it?.commodityDetailId || 0,
									qty: it?.qty || 0,
									price: it?.price || 0,
									money: it?.money || 0,
									preferential: it?.preferential || 0, // 活动优惠金额
									summary: it?.summary || '',
									branchId: it?.branchId || 0,
									accountId:it?.accountId || 0,
									bussinessId: it?.bussinessId || 0,
									activityDetailId:it?.activityDetailId || 0,
									parentid:it?.parentId || 0,
									orderDetailId:it?.detailId || 0
									}
								)
							})
						}
					})
				}
				console.log(json)
				let res = await addMallOrderReturn({
					money:this.money,//订单总金额
					preferential:this.preferential,//优惠金额
					styleQty:this.styleQty,//商品种类数量
					qty:this.qty,//商品总件数
					summary:this.summary,//概述
					// recipient:'a',//收件人
					// phone:'15111111111',//手机号
					// province:'a',//省
					// city:'a',//市
					// area:'a',//区、县
					// address:'a',//详细地址
					details:JSON.stringify(json),//明细信息
					fileUrl1:this.imgList.length && this.imgList[0] && this.imgList[0].url ? this.uploadImgUrl + this.imgList[0].url : '',
					fileUrl2:this.imgList.length && this.imgList[1] && this.imgList[1].url ? this.uploadImgUrl + this.imgList[1].url : '',
					fileUrl3:this.imgList.length && this.imgList[2] && this.imgList[2].url ? this.uploadImgUrl + this.imgList[2].url : '',
					warehouseId:this.$store?.state?.warehouseInfo?.warehouseId,
					activityId:this?.commonityItem?.activityId || '',
					orderId:this?.commonityItem?.orderId || '',
					
				})
				if(res.code == 2000){
					this.causeType = 2
					this.modalShow = false
						console.log(this.commonityItem.commodityInfo)
					this.$store.commit('updateCommonityItem', this.commonityItem)
				}else{
					this.Utils.toast(`${res.msg}`)
				}
			},
			
			//提交
			async submit(){
				//校验退款原因必填
				if(this.summary == ''){
					this.Utils.toast(`请填写退货原因`)
					return
				}
				
				this.modalShow = true
				this.modalInfo.content = '是否提交当前申请信息？？？'
				
			},
			//上传图片
			async uploadImg(){
				//唤起选择图片
				let bdImgUrl =  await this.Utils.takeAPhoto(['album','camera'])
				console.log('bdImgUrl', JSON.stringify(bdImgUrl));
				if(bdImgUrl.tempFilePaths.length>1){
					this.Utils.toast('单次只允许上传一张图片')
					return
				}
				//上传服务器
				let res = await this.Utils.uploadFilePromise(bdImgUrl.tempFilePaths[0])
				console.log(res);
				if(res.code == 2000){
					this.imgList.push(res?.data?.info?.[0])
				}else{
					this.Utils.toast('上传失败')
				}
			},
			//获取数据
			getList(){
				//获取数据
				this.commonityItem = this.$store?.state?.commonityItem || {}
				console.log(this.commonityItem);
				
				
				if(this.commonityItem.type == 1){ //普通商品
					//先循环所有选中的spu
					let commonitySpuArr =  this.commonityItem.commodityInfo.filter(it=>it.spuChecked == true)
					
					let pirceArr = []
					//拿到所有的价格
					commonitySpuArr.forEach(item=>{
						pirceArr.push(...item.children.filter(it=>it.skuChecked == true))
					})
					//累加计算//计算退款金额
					this.money =  pirceArr.reduce((init,item)=>{
						return init += (item.qty * item.price)
					},0)
					
					//计算商品种类总数量 
					this.styleQty = commonitySpuArr.length
					
					//计算商品总件数
					let numArr = []
					//拿到所有的价格
					commonitySpuArr.forEach(item=>{
						numArr.push(...item.children.filter(it=>it.skuChecked == true).map(it=>it.qty))
					})
					//累加计算//计算总数量
					this.qty =  numArr.reduce((init,item)=>{
						return init += item
					},0)
				}
				
				if(this.commonityItem.type == 2){ //活动商品
					//满赠
					if(this.commonityItem.activityType == 1){
						//计算退款金额
						this.money = this.commonityItem.commodityInfo.filter(it=>it.checked==true).reduce((init,item)=>{
							return init += (item.qty * item.price)
						},0)
						
						//计算商品种类总数量
						this.styleQty = this.commonityItem.commodityInfo.filter(it=>it.checked==true).length
						
						//计算总数量
						this.qty = this.commonityItem.commodityInfo.filter(it=>it.checked==true).reduce((init,item)=>{
							return init += item.qty
						},0)
					}
					//满减
					if(this.commonityItem.activityType == 2){
						//计算退款金额
						this.money =  this.commonityItem.commodityInfo.filter(it=>it.checked==true).reduce((init,item)=>{
							return init += (item.qty * item.price) - item.preferential
						},0)
						//计算优惠金额
						this.preferential =  this.commonityItem.commodityInfo.filter(it=>it.checked==true).reduce((init,item)=>{
							return init += item.preferential
						},0)
						
						//计算商品种类总数量
						this.styleQty = this.commonityItem.commodityInfo.filter(it=>it.checked==true).length
						
						//计算总数量
						this.qty = this.commonityItem.commodityInfo.filter(it=>it.checked==true).reduce((init,item)=>{
							return init += item.qty
						},0)
					}
				}
			},
			//返回上一页
			navToBack(){
				// uni.navigateTo({
				// 	url:'/page_public/applyService'
				// })
				// 返回按钮 判断当前页面栈是否大于10
								if(getCurrentPages().length<10){
									uni.navigateBack()
									
								} else{
									uni.redirectTo({
										url:'/page_public/applyService'
									})
								}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-modal__button-group__wrapper--confirm.u-modal__button-group__wrapper--confirm  {
		background-color: #ec4141;
		
		.u-modal__button-group__wrapper__text {
			color: #FFF !important;
		}
	}
	.page_body{
		background-color: #FFF;
	}
.mian_returnCause{
	width: 100%;
	box-sizing: border-box;
	
	.mian_returnCause_money{
		box-sizing: border-box;
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f3f3f3;
		background-color: #FFF;
		font-size: $font_size_14;
		justify-content: space-between;
		.mian_returnCause_money_l{
			color: $text_color_333;
		}
		.mian_returnCause_money_r{
			color: $text_color_ec4141;
			font-weight: bold;
		}
	}
	.mian_returnCause_cause{
		box-sizing: border-box;
		width: 100%;
		height: 340rpx;
		background-color: #FFF;
		font-size: $font_size_14;
		border-bottom: 1px solid #f3f3f3;
		.mian_returnCause_cause_l{
			height: 88rpx;
			line-height: 88rpx;
			color: $text_color_333;
		}
	}
	.mian_returnCause_upload{
		box-sizing: border-box;
		width: 100%;
		height: 500rpx;
		background-color: #FFF;
		font-size: $font_size_14;
		.mian_returnCause_upload_l{
			height: 88rpx;
			line-height: 88rpx;
			color: $text_color_333;
		}
		.mian_returnCause_money_r{
			width: 100%;
			display: grid;
			grid-template-columns: repeat(3,1fr);
			align-items: center;
			justify-items: center;
			gap: 10rpx;
			
			image{
				width: 160rpx;
				height: 160rpx;
			}
		}
	}
	
	.mian_chenggong{
		width: 100%;
		height: 600rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image{
			width: 160rpx;
			height: 160rpx;
		}
		.title{
			font-size: $font_size_18;
			color: $text_color_333;
			font-weight: bold;
		}
		.text{
			font-size: $font_size_14;
			color: $text_color_808080;
		}
	}
}

</style>
